/**
 * 数字雨背景效果
 */
class MatrixRain {
    constructor() {
        this.canvas = document.getElementById('matrix-rain');
        this.ctx = this.canvas.getContext('2d');
        this.characters = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
        this.fontSize = 14;
        this.columns = 0;
        this.drops = [];
        this.density = 5; // 默认密度
        
        this.init();
        this.setupEventListeners();
    }
    
    init() {
        // 设置画布尺寸为窗口大小
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        
        // 计算列数（基于字体大小）
        this.columns = Math.floor(this.canvas.width / this.fontSize);
        
        // 初始化每一列的下落位置
        this.drops = [];
        for (let i = 0; i < this.columns; i++) {
            // 随机初始位置，使其不会同时开始下落
            this.drops[i] = Math.random() * -100;
        }
    }
    
    draw() {
        // 创建半透明黑色背景，形成拖尾效果
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
        
        // 设置文字样式
        this.ctx.fillStyle = 'var(--accent-color)';
        this.ctx.font = `${this.fontSize}px var(--font-mono)`;
        
        // 绘制字符
        for (let i = 0; i < this.drops.length; i++) {
            // 随机选择一个字符
            const text = this.characters.charAt(Math.floor(Math.random() * this.characters.length));
            
            // 绘制字符
            this.ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize);
            
            // 如果达到底部或随机触发，重置到顶部
            if (this.drops[i] * this.fontSize > this.canvas.height && Math.random() > 0.975) {
                this.drops[i] = 0;
            }
            
            // 递增位置
            this.drops[i]++;
        }
    }
    
    animate() {
        this.draw();
        // 根据密度控制动画帧率
        setTimeout(() => {
            requestAnimationFrame(() => this.animate());
        }, 11 - this.density); // 密度越高，延迟越小，速度越快
    }
    
    setupEventListeners() {
        // 监听窗口大小变化
        window.addEventListener('resize', () => this.init());
        
        // 监听密度滑块变化
        const densitySlider = document.getElementById('rain-density');
        if (densitySlider) {
            densitySlider.addEventListener('input', (e) => {
                this.density = parseInt(e.target.value);
                // 更新显示的值
                const rangeValue = e.target.parentElement.querySelector('.range-value');
                if (rangeValue) {
                    rangeValue.textContent = this.density;
                }
            });
        }
    }
    
    // 设置密度的方法（供外部调用）
    setDensity(value) {
        this.density = parseInt(value);
    }
}

// 当DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    const matrixRain = new MatrixRain();
    matrixRain.animate();
    
    // 将实例暴露给全局，以便其他脚本可以访问
    window.matrixRain = matrixRain;
});